<template>
  <div class="app-container">
    <div class="title-tips" v-if="timeHorizon.startTime && timeHorizon.endTime">
      温馨提示：学生确认时间为{{ timeHorizon.startTime }}-{{
        timeHorizon.endTime
      }}，请在学生确认时间后进行离校操作
    </div>
    <el-row>
     
    <el-form :model="queryParams" label-width="90px" ref="queryForm" :inline="true" v-show="showSearch">
        <el-col :span="6">
          <el-form-item label="毕业年份">
            <el-select v-model="queryParams.dgsId" clearable placeholder="请选择">
              <el-option v-for="item in yearList" :key="item.DGS_ID" :label="item.GRAD_YEAR"
                :value="item.DGS_ID"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="学位">
            <el-select v-model="queryParams.edLevel" clearable placeholder="请选择">
              <el-option v-for="dict in dict.type.basic_speciality_type" :key="dict.value" :label="dict.label"
                :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="毕业生状态">
            <el-select v-model="queryParams.gdpStatus" clearable placeholder="请选择">
              <el-option v-for="dict in dict.type.dep_grad_status" :key="dict.value" :label="dict.label"
                :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="院系">
            <el-select
              v-model="queryParams.deptId"
              clearable
              placeholder="请选择"
              @change="handSpeciality"
            >
              <el-option
                v-for="dict in classTreeList"
                :key="dict.id"
                :label="dict.label"
                :value="dict.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="专业">
            <el-select
              v-model="queryParams.specialityId"
              clearable
              placeholder="请选择"
              @change="changeGrade"
            >
              <el-option
                v-for="dict in specialityList"
                :key="dict.VALUE"
                :label="dict.TITILE"
                :value="dict.VALUE"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="gradeId" label="年级">
            <el-select
              v-model="queryParams.gradeId"
              placeholder="请选择"
              @change="changeGrade"
              clearable
              class="elSelect"
            >
              <el-option
                v-for="item in gradeDate"
                :key="item.VALUE"
                :label="item.TITILE"
                :value="item.VALUE"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="班级">
            <el-select
              v-model="queryParams.classId"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="dict in classListType"
                :key="dict.VALUE"
                :label="dict.TITLE"
                :value="dict.VALUE"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="学生注册号">
            <el-input v-model="queryParams.regCode" placeholder="请输入注册号" clearable />
          </el-form-item>
        </el-col>
       
        <el-col :span="6" style="float:right;text-align: right;">
          <el-form-item>
            <div>
              <el-button type="primary" icon="el-icon-search" @click="onSearch" size="mini">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-button type="primary" @click="goBack">返回</el-button>
    <div style="float: right">
      <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          size="mini"
          @click="upload.open = true"
          :disabled="operate"
        >批量导入问题银行卡号</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
        type="primary"
          plain
          size="mini"
          @click="handleTemplate"
        >下载导入模板</el-button>
      </el-col>
    </el-row>
    </div>
    <div class="tabs">
      <div class="tabs-header">
        <span
          class="tabs-nav"
          v-bind:class="{ 'tabs-nav-selected': activeTab == index }"
          v-for="(tab, index) in tabs"
          @click="handleTabClick(index)"
          :key="index"
        >
          {{ tab }}
        </span>
      </div>
      <div class="tabs-content">
        <div v-show="activeTab == 0">
          <tableList ref="ondutys" :backList="backList" @child-event="parentMethod" v-if="falg" :activeTab="activeTab" :queryParams="queryParams"></tableList>
        </div>
        <div v-show="activeTab == 1">
          <tableList ref="applincant" :backList="backList" v-if="falg" :activeTab="activeTab" :queryParams="queryParams"></tableList>
        </div>
        <div v-show="activeTab == 2">
          <tableList ref="history" :backList="backList" v-if="falg" :activeTab="activeTab" :queryParams="queryParams"></tableList>
        </div>
        <div v-show="activeTab == 3">
          <tableList ref="history" :backList="backList" v-if="falg" :activeTab="activeTab" :queryParams="queryParams"></tableList>
        </div>
      </div>
      <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    </div>
    <el-dialog
      title="导入问题银行卡卡号"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
    >
      <div style="float: left; height: 30px; line-height: 30px">上传文件：</div>
      <el-upload
        ref="uploads"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="onSuccess"
        :auto-upload="false"
      >
        <div class="el-upload__text">
          <i class="el-icon-upload"></i>
          <em>点击上传</em>
        </div>
        <span style="height: 30px; line-height: 30px; margin-left: 10px"
          >仅支持 xls格式文件</span
        >
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitUpload" :disabled="submitLock">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="上传结果"
      :visible.sync="uploadData"
      width="500px"
      append-to-body
    >
      <div>
        共录入数据{{ studenData.totalSize }}条，上传成功{{
          studenData.successSize
        }}条，上传失败{{ studenData.errorSize }}条，下载上传结果查看。
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="importData">下载上传结果</el-button>
        <el-button @click="uploadData = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
      
    <script>

import { financialList,confirmTime } from "@/api/departure/financing";
import { getGradYearSelector,cancelTime } from "@/api/departure/gradsettings";
import { getSpecialityByDeptId } from "@/api/information/unitMajor";
import moment from "moment";
import tableList from "@/views/departure/financing/components/tableList.vue";
import searchForm from "@/components/Search/searchForm.vue";
import { getDicts } from "@/api/system/dict/type";
import { getClassSelect } from "@/api/information/classInfor";
import { classTree } from "@/api/information/studentInfor";
import { getToken } from "@/utils/auth";
import { getGradeSelect } from "@/api/information/gradeInfor";

export default {
  dicts: [
    "basic_speciality_type", // 学生担任职务字典
    "dep_grad_status", // 类型
  ],
  components: {
    tableList,searchForm
  },
  data() {
    return {
      
      ruleForm: {
        pageNum: 1,
        pageSize: 10,
        
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        bankStatus: '',
        dgsId: '',
        deptId: null,
        classId: null,
        specialityId: null,
      },
      profession: [],
      selectorList: [],
      backList: [],
      falg: false,
      showSearch: true,
      tabs: ["学生列表无问题", "银行卡号有问题学生列表", "银行卡号已修正学生列表",'银行卡号未提供学生列表'],
      activeTab: '',
      form: {
        studentName: undefined,
        dm: undefined,
      },
      total: 0,
      operate: true,
      submitLock:false,
      open: false,
      yearList: [],
      classListType: [],
      classTreeList: [],
      specialityList: [],
      gradeDate: [],
      uploadData: false,
      studenData: {},
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: true,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url:
          process.env.VUE_APP_BASE_API + "/basicdata/bankInfo/importError",
      },
      timeForm: {},
      timeHorizon: {}
    };
  },
 
  created() {
    getGradYearSelector().then((res) => {
      this.yearList = res.data
      this.queryParams.dgsId = res.data[0].DGS_ID
      // this.queryParams.dgsId = this.$route.query.dgsId
      classTree().then((response) => {
      this.classTreeList = response.data
      this.activeTab = this.$route.query.id
      this.queryParams.deptId = Number(this.$route.query.deptId)
      this.queryParams.dgsId = Number(this.$route.query.dgsId)
      this.handSpeciality()
      // this.getList();
      this.$nextTick(() => {
      this.handleTabClick(this.activeTab);
    });
    this.getTitme(this.queryParams.dgsId)

    
    });
    });
   
   
    
  },
  methods: {
    getTitme(data) {
      if(data){
        confirmTime(this.queryParams.dgsId).then((res) => {
      console.log(res, "时间");
      if (res.code == 200) {
        this.timeHorizon = res.data;
        // const startTime = moment(res.data.startTime, 'YYYY年MM月DD日').format('YYYY-MM-DD')
   
        if (
          new Date().getTime() > new Date(res.data.endTime).getTime()
        ) {
          this.operate = false;
        } else {
          this.operate = true;
        }
      } else {
        this.operate = true;
      }
    });
      }
    },
       // 返回上一级
       goBack() {
      this.$router.go(-1)
    },
     // 获取搜索表单提交的数据
     onSearch() {
      // 查询条件和分页数据合并
      this.getList();
      this.getTitme(this.queryParams.dgsId)

    },
    // 重置
      /** 重置按钮操作 */
      resetQuery() {
      this.queryParams = {};
      this.queryParams.dgsId = this.yearList[0].DGS_ID;
      this.queryParams.deptId =  Number(this.$route.query.deptId)
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.classListType = []
      this.gradeDate = []
      this.specialityList = []
      // this.onSearch();
      this.ruleForm = {};
      this.profession = [];
      this.handleTabClick(this.activeTab);
      this.getSpeciality()
      this.getGradeInfor()
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    parentMethod() {
      this.getList()
    },
  
    // 获取列表信息
    getList() {
      this.falg = false
      financialList(this.queryParams).then((response) => {
        console.log(response, "huoqu");
        this.falg = true
        this.backList = response.rows
        this.total = response.total
      });
    },
    getClassList() {
      getClassSelect({
        gradeId: this.queryParams.gradeId,
        specialtyId: this.queryParams.specialityId,
      }).then((res) => {
        console.log(res, "班级");
        this.classListType = res.data;
      });
    },
    // 年级
    getGradeInfor() {
      getGradeSelect().then((response) => {
        this.gradeDate = response.data;
      });
    },
    changeGrade(value) {
      console.log(value, "ceeee");
      if (value != undefined) {
        if (this.queryParams.specialityId && this.queryParams.gradeId) {
          this.getClassList();
          this.classListType = [];
          this.queryParams.classId = "";
        } else {
          if (!value) {
            this.classListType = [];
            this.queryParams.classId = "";
          }
        }
      }
    },
    async handSpeciality() {
      this.queryParams.specialityId = ''
      this.queryParams.classId = ''
      this.classListType = [];
      this.getSpeciality() 
      this.getGradeInfor()
    },
    // 专业
    async getSpeciality() {
      if (this.queryParams.deptId) {
        await getSpecialityByDeptId({ deptId: this.queryParams.deptId }).then(res => {
          if (res.code == "200") {
            this.specialityList = res.data;
          } else {
            this.specialityList = [];
          }
        });
      } else {
        this.specialityList = [];
      }
    },
    handleChanges(value) {
      this.ruleForm.deptId = value[value.length - 1];
    },
   
    // 添加
    handleAdd() {
      this.open = true;
    },
    cancel() {
      this.open = false;
    },
    // tab切换
    handleTabClick(index) {
      console.log(index,'uuuuu')
      this.activeTab = index;
      if (index == 0) {
        this.queryParams.bankStatus = "B";
        this.getList()
      } else if (index == 1) {
        this.queryParams.bankStatus = "C";
        this.getList()
      } else if (index == 2) {
        this.queryParams.bankStatus = "D";
        this.getList()
      }else if (index == 3) {
        this.queryParams.bankStatus = "A";
        this.getList()
      }
    },
    handleQuery() {
      this.handleTabClick(this.activeTab);
      this.profession = [];
      console.log(this.ruleForm, "查询");
    },
  
    /** 提交按钮 */
    submitForm: function () {
      if (this.regCode == "") {
        this.$modal.msgError("请填写注册号");
      } else {
        this.form.cardNumber = Number(this.form.cardNumber);
        this.$refs["form"].validate((valid) => {
          if (valid) {
            postempAdd(this.form).then((response) => {
              if (response.code == 200) {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.$refs.ondutys.getList(this.ruleForm);
                this.regCode = "";
                this.form = {};
              }
            });
          }
        });
      }
    },
    handleFileUploadProgress() {
      this.upload.isUploading = true;
    },
    onSuccess(response) {
      if (response.code == 200) {
        this.$message.success("文件上传成功");
        this.studenData = response.data;
        this.importUrl = response.url;
        this.upload.isUploading = false;
      this.$refs.uploads.clearFiles();
        
        this.upload.open = false;
        this.uploadData = true;
        this.getList();
      } else {
        this.studenData = response.data;
        this.upload.isUploading = false;
        this.$refs.uploads.clearFiles();
        this.upload.open = false;
        this.uploadData = false;
        this.$message.error(response.msg);
        // this.getList();
      }
    },
    submitUpload() {
       // 使用防抖确保只提交一次
    if (!this.submitLock) {
      this.submitLock = true;
      this.$refs.uploads.submit();
      
      // 3秒后重置锁，防止长时间锁定
      setTimeout(() => {
        this.submitLock = false;
      }, 5000);
    }
      
      // this.$refs.uploads.clearFiles();
    },
    importData() {
      let link = document.createElement("a");
      //创建一个a标签
      link.style.display = "none";
      //将a标签隐藏
      link.href = process.env.VUE_APP_BASE_API + this.importUrl;
      //给a标签添加下载链接  "域名+接口"  safe是一个动态的域名  后面的接口替换成你自己的下载接口
      link.setAttribute("download", "下载上传结果");
      // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
      document.body.appendChild(link);
      //将上面创建的a标签加入到body的尾部
      link.click();
      //执行a标签
    },
     /** 导出按钮操作 */
     handleTemplate() {
      this.download('/basicdata/bankInfo/importErrorTemplate', {
      }, `银行卡模板${new Date().getTime()}.xlsx`)
    }
  },
};
</script>
      
    <style lang="scss" scoped>
     .el-upload__text {
  color: #0077fa;
  border: 1px solid #0077fa;
  background-color: #dbdcdc;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  float: left;
}
    .title-tips {
  text-align: center;
  border: 1px solid #d0d0d0;
  padding: 5px;
  margin-bottom: 5px;
}
.tabs {
  margin-top: 30px;
}
.tabs-nav-selected {
  color: #3192fc;
  border-bottom: 1px solid #3192fc;
  padding-bottom: 3px;
}

.tabs-header {
  cursor: pointer;
  line-height: 30px;
  height: 30px;
}

.tabs-nav {
  line-height: 30px;
  margin-right: 5%;
}
</style>